<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="img/favicon.ico">
    <script src="js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <style>
        .main-nav > ul > li:hover {
            /*background-color: #014099;*/
        }
        .main-nav > ul > li > a {
            cursor: pointer;
            color: black;
            padding-left: 20px;
            padding-right: 20px;
        }
        .main-nav > ul > li > ul > li:hover {
            color: #014099;
        }
        .main-nav > ul > li > ul > li > a {
            cursor: pointer;
        }
        .main-nav > ul > li:not(:last-child) {
            padding-right: 0;
        }
        .bg {
            /*background-color: #014099;*/
            color: red;
        }
        .box-b{
            margin-top: 10px;
        }
        .box-b .bb{
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #FF6700;
        }
        .box-b p{
            height: 35px;
            line-height: 35px;
            text-align: right;
            padding-right: 15px;
            font-size: 12px;
            color: #FF6700;
            background: #fff;
            margin: 0;
        }
        .box-b-1 {
            overflow: hidden;
            padding-bottom: 3px;
        }
        .box-b-1-l {
            float: left;
            width: 26%;
            height: 70px;
            padding: 0 2%;
        }
        .box-b-1-l img{
            width: 50%;
            height: 65px;
        }
        .box-b-1-r {
            width: 74%;
            height: 20px;
            float: left;
        }
        .box-b-1-r p {
            text-align: left;
            width: 75%;
            line-height: 18px;
            float: left;
            color: #020202;
            background: none;
        }
        .box-b-2 {
            height: 35px;
            line-height: 35px;
            font-size: 12px;
            text-align: right;
            background: #fff;
        }
        .box-b-2 span {
            padding-right: 6px;
        }
        .box-b-3 {
            height: 40px;
            font-size: 13px;
            text-align: right;
            background: #fff;
        }
        .box-b-3 a {
            color: #000000;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            margin-top: 3px;
            border-radius: 18px;
            margin-right: 12px;
            text-align: center;
        }
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
        .btnanniu{
            padding:0 15px;border:1px solid #FF6700;color: #FF6700;cursor: pointer;
        }
    </style>
</head>
<body>
<div class="main-wrapper" style="padding-top: 20px;">
    <!--   菜单   -->
    <div class="main-header header-sticky" data-bg-color="#1eb9ee">
        <div class="container">
            <div class="main-header_nav position-relative">
                <div class="row align-items-center">
                    <div class="col-lg-12 d-none d-lg-block">
                        <div class="main-menu">
                            <nav class="main-nav">
                                <ul>
                                    <li class="drop-holder bg" onclick="toUrl('-1')">
                                        <a i18n="">全部</a>
                                    </li>
                                    <li onclick="toUrl('0')">
                                        <a i18n="">未支付</a>
                                    </li>
                                    <li class="megamenu-holder" onclick="toUrl('1')">
                                        <a i18n="">待发货</a>
                                    </li>
                                    <li class="drop-holder" onclick="toUrl('2')">
                                        <a i18n="">已发货</a>
                                    </li>
                                    <li class="drop-holder" onclick="toUrl('3')">
                                        <a i18n="">已完成</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="max-width: 1170px;height: 500px;padding-top: 20px;margin: auto;">
        <div style="text-align: center;" id="orderData">
            暂无数据
<!--            <div class="box-b">-->
<!--                <div class="bb">-->
<!--                    <div>已完成</div>-->
<!--                    <div>下单时间 2023-03-15 19:41:01</div>-->
<!--                </div>-->
<!--                <div style="background: #f6f6f6; padding-top:8px;padding-bottom: 3px;border-bottom:4px solid whitesmoke;">-->
<!--                    <div style="margin-top:5px;" onclick="orderdetail()" class="box-b-1">-->
<!--                        <div class="box-b-1-l">-->
<!--                            <img src="img/banner.jpg">-->
<!--                        </div>-->
<!--                        <div class="box-b-1-r">-->
<!--                            <p style="font-size:13px;">测试商品</p>-->
<!--                            <p style="width: 25%;text-align: right;"><span>￥0.11</span></p>-->
<!--                            <p class="jianjiea" style="width:88%;">测试商品</p><br><br>-->
<!--                            <span style="color:#666">×1</span>-->
<!--                            <p></p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div style="border-bottom:3px solid white;"></div>-->
<!--                    <div class="box-b-2">-->
<!--                        <span>共1件商品</span>-->
<!--                        <span>合计：￥0.11（含运费￥0）</span>-->
<!--                    </div>-->
<!--                    <div class="box-b-3">-->
<!--                        <a style="padding:0 15px;border:1px solid #FF6700;color: #FF6700;">已完成</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</div>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/token.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
</body>
<script>

    var layer = layui.layer;
    var form = layui.form;

    var moduleName = "shop";
    var defaultLang = layui.data('langTab').langType;
    initLangConfig({
        defaultLang: defaultLang,
        filePath: "js/i18n/" + moduleName + "/",
        module: moduleName,
        base: "js/"
    })
    var i18np = null;

    function changeLang(lang) {
        defaultLang = lang;
        reloadI18n({
            defaultLang: lang,
            filePath: "js/i18n/" + moduleName + "/",
            module: moduleName,
        })
        i18np.loadProperties(moduleName);
    }

    layui.config({base: 'js/'})
        // 继承treetable.js插件
        .extend({i18np: 'i18n'}).use(['i18np', 'jquery'], function () {
        i18np = layui.i18np;
        i18np.loadProperties(moduleName);
    });

    //跳转页面
    function toUrl(url) {
        $(".main-nav>ul>li").removeClass("bg");
        switch (url) {
            case '-1':        //全部
                $(".main-nav>ul>li:eq(0)").addClass("bg");
                getOrderList(-1);
                break;
            case '0':         //未支付
                $(".main-nav>ul>li:eq(1)").addClass("bg");
                getOrderList(0);
                break;
            case '1':         //待发货
                $(".main-nav>ul>li:eq(2)").addClass("bg");
                getOrderList(1);
                break;
            case '2':         //已发货
                $(".main-nav>ul>li:eq(3)").addClass("bg");
                getOrderList(2);
                break;
            case '3':         //已完成
                $(".main-nav>ul>li:eq(4)").addClass("bg");
                getOrderList(3);
                break;
        }
    }

    function orderdetail(i) {
        console.log("跳转订单详情："+orderList[i].id);
    }

    var orderList = [];
    $(function () {
        getOrderList(-1);
    })

    function initOrderData() {
        let s = "";
        if (orderList.length > 0){
            for (var i=0;i<orderList.length;i++){
                let name = "";
                for (var j=0;j<orderList[i].orderDetailList.length;j++){
                    if (j == orderList[i].orderDetailList.length-1){
                        name = name + orderList[i].orderDetailList[j].goods.nameZh+"x"+orderList[i].orderDetailList[j].odNum
                    }else{
                        name = name + orderList[i].orderDetailList[j].goods.nameZh+"x"+orderList[i].orderDetailList[j].odNum+","
                    }
                }
                let orStatus = orderList[i].orStatus;
                let btn = "";
                if (orStatus == 0){
                    btn = "                    <div class=\"box-b-3\">\n" +
                        "                        <a class='btnanniu' onclick=\"pay("+i+")\">立即支付</a>\n" +
                        "                    </div>";
                }else if (orStatus == 2){
                    btn = "                    <div class=\"box-b-3\">\n" +
                        "                        <a class='btnanniu' onclick=\"shouhuo("+i+")\">确认收货</a>\n" +
                        "                    </div>";
                }
                let orderStatus = orStatus==0 ? "未支付" : (orStatus==1 ? "待发货" : (orStatus==2 ? "已发货" : "已完成"));
                s = s + "<div class=\"box-b\">\n" +
                        "<div class=\"bb\">\n" +
                    "                    <div>"+orderStatus+"</div>\n" +
                    "                    <div>下单时间 "+orderList[i].orTime+"</div>\n" +
                    "                </div>"+
                    // "                <p>下单时间 "+orderList[i].orTime+"</p>\n" +
                    "                <div style=\"background: #f6f6f6; padding-top:8px;padding-bottom: 3px;border-bottom:4px solid whitesmoke;\">\n" +
                    "                    <div style=\"margin-top:5px;\" onclick=\"orderdetail("+i+")\" class=\"box-b-1\">\n" +
                    "                        <div class=\"box-b-1-l\">\n" +
                    "                            <img src=\"img/logo.png\">\n" +
                    "                        </div>\n" +
                    "                        <div class=\"box-b-1-r\">\n" +
                    "                            <p style=\"font-size:13px;\">"+name+"</p>\n" +
                    "                            <p style=\"width: 25%;text-align: right;\"><span>"+orderList[i].orPrice+"K"+"</span></p>\n" +
                    "                            <p class=\"jianjiea\" style=\"width:88%;\"></p><br><br>\n" +
                    "                        </div>\n" +
                    "                    </div>\n" +
                    "                    <div style=\"border-bottom:3px solid white;\"></div>\n" +
                    "                    <div class=\"box-b-2\">\n" +
                    "                        <span>共"+orderList[i].orTotalNum+"件商品</span>\n" +
                    "                        <span>合计："+orderList[i].orPrice+"K"+"（含运费0）</span>\n" +
                    "                    </div>\n" +
                         btn +
                    "                </div>\n" +
                    "            </div>";
            }
        }else {
            s = "暂无数据";
        }
        $("#orderData").html(s);
    }

    function pay(i) {
        layer.confirm("确定支付吗？", {
            title: "提示",
            btn: ["确定","取消"]}, function(index){
            $.ajax({
                url:HOST+"webapi/order/payOrderById"
                ,type:"get"
                ,data:{
                    orId:orderList[i].id
                }
                ,contentType: 'application/json'
                ,headers:{"token":localStorage.getItem("token")}
                ,success:function (res) {
                    if(res.code==200){
                        layer.msg("支付成功！",{icon:1});
                        setTimeout(function(){
                            var index = layer.getFrameIndex(window.name);
                            layer.close(index);//关闭弹出层
                            location.reload();//重新加载页面
                        },1500);
                    }else{
                        layer.msg("支付失败！",{icon:2});
                    }
                }
                ,error:function () {
                    console.log("ajax error"),{icon:2};
                }
            });
            layer.close(index);
        },function(index){
            layer.close(index);
        })
    }

    function shouhuo(i) {
        layer.confirm("确认收货吗？", {
            title: "提示",
            btn: ["确定","取消"]}, function(index){
            $.ajax({
                url:HOST+"webapi/order/shouhuo"
                ,type:"get"
                ,data:{
                    orId:orderList[i].id
                }
                ,contentType: 'application/json'
                ,headers:{"token":localStorage.getItem("token")}
                ,success:function (res) {
                    if(res.code==200){
                        layer.msg("收货成功！",{icon:1});
                        setTimeout(function(){
                            var index = layer.getFrameIndex(window.name);
                            layer.close(index);//关闭弹出层
                            location.reload();//重新加载页面
                        },1500);
                    }else{
                        layer.msg("收货失败！",{icon:2});
                    }
                }
                ,error:function () {
                    console.log("ajax error"),{icon:2};
                }
            });
            layer.close(index);
        },function(index){
            layer.close(index);
        })
    }

    //查询订单
    function getOrderList(status) {
        $.ajax({
            url: HOST + "webapi/order/getorder?limit=100&status="+status,
            type: "get",
            headers: {"token": localStorage.getItem("token")},
            success: function (res) {
                if (res.code == 200){
                    orderList = res.data;
                    initOrderData();
                }
            }
        })
    }
</script>


</html>